<template>
  <div>
    <header>
      <div class="title">
        集团关键业务环节数字化覆盖度整体情况
        <Tooltip placement="right" transfer max-width="1200">
          <Icon type="ios-help-circle-outline" />
          <div slot="content">
            <div>
              关键业务环节数字化覆盖度：指运用5G、大数据、云计算、人工智能、物联网、区块链等新一代数字技术对企业价值链深度和广度的变革、优化和支撑情况。企业关键业务环节数字化覆盖度由广度和深度组成，一般情况下各占50%，每个产业基于不同的产业特性，在广度和深度的权重分配会略有不同。
            </div>
            <br />
            <div>
              关键业务环节数字化覆盖深度：企业管理价值链（指战略、人力、财务、办公、审计、法律等）和业务价值链（指研发、供应链、生产、物流、营销、运营等）的覆盖度。
            </div>
            <br />
            <div>
              关键业务环节数字化覆盖广度：代表智能化应用的空间区域覆盖范围，体现了智能化应用的推广情况，例如，工厂、网点、商场、门店、公司等。
            </div>
            <br />
            <div>
              关键业务环节数字化覆盖十四五目标完成率：计算方式为
              （当前覆盖度-十四五年初覆盖度）/(十四五目标覆盖度-十四五年初覆盖度）
            </div>
            <br />
            <div>关键业务环节数字化覆盖度年度提升值：当前季度覆盖率-当年一季度覆盖率</div>
          </div>
        </Tooltip>
      </div>
      <Select filterable placeholder="请选择" v-model="quarter" @on-change="changeTableCode">
        <Option v-for="item in quarterList" :value="item.value" :key="item.value">{{ item.value }}</Option>
      </Select>
    </header>
    <div class="cart">
      <div class="cart_item" v-for="item in group" :key="item.title">
        <div class="icon">
          <div class="block"><Icon type="md-trending-up" size="20" color="#FF9600"></Icon></div>
        </div>
        <div class="content">
          <div :class="item.num === '0.00%'? 'isZero' : 'percent'">{{ item.num }}</div>
          <div class="text">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div>
      <header>业务板块关键业务环节数字化覆盖情况</header>
      <div class="segments">
        <div class="seg_item" v-for="item in bs" :key="item.title">
          <div class="icon"><img :src="item.imgSrc" :alt="item.title" /></div>
          <div class="title">{{ item.title }}</div>
          <div class="content">
            <div class="before" v-for="content in item['content']" :key="content.year">
              <div class="year">{{ content.year }}</div>
              <div class="data">{{ content.data }}</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <header>
          业务单元关键业务环节数字化覆盖情况
          <div class="legend">
            <div class="initial">
              <div class="block1"></div>
              <div class="text">十四五初始值</div>
            </div>
            <div class="nowCover">
              <div class="block2"></div>
              <div class="text">当前覆盖度</div>
            </div>
            <div class="goal">
              <div class="block3"></div>
              <div class="text">十四五目标值</div>
            </div>
          </div>
        </header>
        <div class="unit">
          <div class="unit_item" v-for="(item, index) in chartData" :key="index">
            <barChart :chartData="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cover2Api from '@/api/cover2'
import barChart from './coverStatusChart/barChart.vue'
import { mapState } from 'vuex'
export default {
  components: {
    barChart
  },
  data() {
    return {
      group: [
        { title: '十四五初集团关键业务环节数字化覆盖度', num: '0%', type: 'init' },
        { title: '当前季度集团关键业务环节数字化覆盖度', num: '0%', type: 'current' },
        { title: '十四五末集团关键业务环节数字化覆盖度目标', num: '0%', type: 'target' },
        { title: '集团关键业务环节数字化覆盖目标完成率', num: '0%', type: 'keylink' }
      ],
      bs: [
        {
          title: '大消费',
          imgSrc: require('@/asset/cover/dxf.png'),
          content: [
            { year: '2021', data: '0' },
            { year: '当前', data: '0' },
            { year: '2025', data: '0' }
          ]
        },
        {
          title: '综合能源',
          imgSrc: require('@/asset/cover/zh.png'),
          content: [
            { year: '2021', data: '0' },
            { year: '当前', data: '0' },
            { year: '2025', data: '0' }
          ]
        },
        {
          title: '城市建设运营',
          imgSrc: require('@/asset/cover/chengshi.png'),
          content: [
            { year: '2021', data: '0' },
            { year: '当前', data: '0' },
            { year: '2025', data: '0' }
          ]
        },
        {
          title: '大健康',
          imgSrc: require('@/asset/cover/djk.png'),
          content: [
            { year: '2021', data: '0' },
            { year: '当前', data: '0' },
            { year: '2025', data: '0' }
          ]
        },
        {
          title: '产业金融',
          imgSrc: require('@/asset/cover/cyjr.png'),
          content: [
            { year: '2021', data: '0' },
            { year: '当前', data: '0' },
            { year: '2025', data: '0' }
          ]
        },
        {
          title: '科技及新兴产业',
          imgSrc: require('@/asset/cover/keji.png'),
          content: [
            { year: '2021', data: '0' },
            { year: '当前', data: '0' },
            { year: '2025', data: '0' }
          ]
        }
      ],
      bisObjs: '',
      quarter: '',
      showChart: false,
      chartData: []
    }
  },
  props: {
    quarterList: {
      type: Array,
      default: () => []
    },
    buList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState(['writeablePeriod'])
  },
  mounted() {
    this.quarter = this.writeablePeriod || this.quarterList[0].value
    this.bisObjs = this.buList.reduce((res, item) => ((res[item.key] = item.value), res), {})
    this.changeTableCode()
  },
  methods: {
    formatBu(bu) {
      this.chartData = bu.map(buList => {
        const labels = []
        const series = [
          { label: '十四五初始值', data: [] },
          { label: '当前覆盖度', data: [] },
          { label: '十四五目标值', data: [] }
        ]
        //按业务单元排序
        const sortData = buList.data
        sortData.sort((a, b) => {
          return this.buList.findIndex(obj => obj.key === b.buCode) - this.buList.findIndex(obj => obj.key === a.buCode)
        })
        sortData.forEach(item => {
          labels.push(this.bisObjs[item.buCode])
          series[0].data.push(item.init)
          series[1].data.push(item.current)
          series[2].data.push(item.target)
        })
        // 固定6个
        const len = labels.length
        if (len < 6) {
          for (let i = 0; i < 6 - len; i++) {
            labels.unshift('')
            series[0].data.unshift('')
            series[1].data.unshift('')
            series[2].data.unshift('')
          }
        }
        return {
          labels,
          series
        }
      })
    },
    formatBs(bs) {
      bs.forEach(item => {
        this.bs[item.type].content[0].data = (item['init'] * 100).toFixed(2) + '%'
        this.bs[item.type].content[1].data = (item['current'] * 100).toFixed(2) + '%'
        this.bs[item.type].content[2].data = (item['target'] * 100).toFixed(2) + '%'
      })
    },

    hasCurrentZero(data) {
      for (let i = 0; i < data.length; i++) {
        const innerArray = data[i].data
        const found = innerArray.find(item => item.current === 0)
        // 如果找到了 current 为 0 的对象，返回 true
        if (found) {
          return true
        }
      }
      // 如果没有找到，返回 false
      return false
    },
    
    changeTableCode() {
      cover2Api
        .summaryOverall({ period: this.quarter })
        .then(res => {
          if (res.code !== 200) {
            this.$message.error({
              content: res.msg,
              duration: 3
            })
            return
          }
          // 处理后端数据不正确，当出现当前覆盖度current有0的时候，group数据的current和keylink设置为0
          const currentZero = this.hasCurrentZero(res.data.bu)
          function formatNumber(type, value) {
            if (currentZero && (type === 'current' || type === 'keylink')) {
              return '0.00%'
            }
            return (value * 100).toFixed(2) + '%'
          }
          this.group.forEach(item => {
            let value = 0
            if (currentZero) {
              value = res.data.group[item.type] || 0
            } else {
              value = res.data.group[item.type]
            }
            item.num = formatNumber(item.type, value)
          })
          // this.group.forEach(item => {
          //   const value = res.data.group[item.type]
          //   item.num = (value * 100).toFixed(2) + '%'
          // })
          this.formatBs(res.data.bs)
          this.formatBu(res.data.bu)
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ivu-select {
  width: 15%;
}
header {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .title {
    font-size: 18px;
    font-weight: 700;
  }
}
.cart {
  display: flex;
  margin: 10px 0;
  .cart_item {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100px;
    border-radius: 10px;
    margin: 0 10px;
    &:nth-child(1) {
      background: #fff8e3;
      margin-left: 0;
      .icon {
        background-color: #ff9600;
      }
    }
    &:nth-child(2) {
      background: #eef0ff;
      .icon {
        background-color: #31afff;
      }
    }
    &:nth-child(3) {
      background: #ddfffc;
      .icon {
        background-color: #00ceaa;
      }
    }
    &:nth-child(4) {
      background: #e4ffdf;
      margin-right: 0;
      .icon {
        background-color: #00ce51;
      }
    }
    .icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      // background-color: #FF9600;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 20px;
      .block {
        width: 20px;
        height: 20px;
        background: #fff;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      .percent {
        font-size: 20px;
        font-weight: 700;
        color: #ff9500;
      }
      .isZero {
        font-size: 20px;
        font-weight: 700;
        color: #CEE1D7;
      }
    }
  }
}
.segments {
  display: flex;
  .seg_item {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
    flex: 1;
    height: 240px;
    background: #f9f9f9;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    // margin: 20px;
    &:nth-child(1) {
      margin-left: 0;
      .title {
        color: #d4061c;
      }
    }
    &:nth-child(2) {
      .title {
        color: #5d8e4a;
      }
    }
    &:nth-child(3) {
      .title {
        color: #6d2478;
      }
    }
    &:nth-child(4) {
      .title {
        color: #f47000;
      }
    }
    &:nth-child(5) {
      .title {
        color: #0081c6;
      }
    }
    &:nth-child(6) {
      margin-right: 0;
      .title {
        color: #00b3ae;
      }
    }
    .icon {
      margin: 10px 0;
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: 700;
    }
    .content {
      display: flex;
      flex: 2;
      justify-content: space-between;
      align-items: center;
      margin: 0 20px;
      color: #6e2d78;
      .before {
        display: flex;
        gap: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.unit {
  display: flex;
  .unit_item {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 240px;
    background: #f9f9f9;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
    &:nth-child(6) {
      margin-right: 0;
    }
  }
}
.legend {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  .initial,
  .nowCover,
  .goal {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    .block1,
    .block2,
    .block3 {
      width: 30px;
      height: 16px;
      margin-right: 10px;
      border-radius: 3px 3px 0 0;
      background: #ff9600;
    }
    .text {
      font-size: 12px;
    }
    .block2 {
      background: #ffb768;
    }
    .block3 {
      background: #dddddd;
    }
  }
}
</style>
